

<template>
  <view class="device">
    <view class="device-drop-list">
      <div class="home-drop-item " @click="openCategory(2)">
        <span class="drop-name">{{ roomItem.label }}</span>
        <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
      </div>
    </view>
    <div class="device-data2">
      <u-row :gutter="20" style="width: 100%">
        <u-col :span="6" v-for="item in deviceList" @click="clickDevice(item)">
          <div class="device-data-item" >
            <div class="device-data-item-top">
              <image :src="item.image" :style="{ width: item.width + 'rpx', height: item.height + 'rpx'}"></image>
              <span class="device-name">{{ item.name }}</span>
            </div>
            <div class="device-data-item-bottom">
              <div class="normal">
                正常：{{ item.normalCount }}
              </div>
              <div class="error">
                异常：{{ item.errorCount }}
              </div>
            </div>
          </div>
        </u-col>
      </u-row>
      <u-empty v-if="deviceList.length === 0" text="暂无数据" mode="list"></u-empty>
    </div>
    <view class="device-drop-list">
      <div class="home-drop-item " @click="openCategory(1)">
        <span class="drop-name">{{ dateItem.label }}</span>
        <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
      </div>
    </view>
    <DayTab ref="dayTabRef" :active-day="activeDay" :currentDate="dateItem.value" @change="changeDay"></DayTab>
    <view class="device-box">
      <u-tabs :list="list" :current="current" @change="changeTab" />
      <view class="device-list">
        <view class="device-item" v-for="item in recordList">
          <div>
            <view class="device-name">
              {{ item.name }}
            </view>
            <view class="device-name">
              {{ item.responser }}
            </view>
          </div>
          <view class="device-info">
            <view class="device-info-item-value">{{ item.date }}</view>
          </view>
        </view>
      </view>
      <u-empty v-if="recordList.length === 0" text="暂无数据" mode="list"></u-empty>
    </view>
    <u-picker
        v-model="showDate"
        mode="time"
        :start-year="2020"
        :end-year="ownYear"
        :params="{
          year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
        }"
        @cancel="showDate = false"
        @confirm="confirmDate">
    </u-picker>
    <u-select
        :default-value="[defaultRoom]"
        v-model="showRoom"
        :list="roomList"
        @cancel="showRoom = false"
        @confirm="confirmRoom">
    </u-select>
  </view>
</template>
<script>
import Box from '@/components/box'
import dayjs from "dayjs";
import DayTab from "../../components/dayTab.vue";
export default {
  name: "device",
  components: {
    DayTab,
    Box
  },
  computed: {
    defaultRoom() {
      return this.roomList.findIndex(item => item.value == this.roomItem.value)
    }
  },
  data() {
    return {
      ownYear: new Date().getFullYear(),
      showDate: false,
      dateItem: {
        value: dayjs().format('YYYY-MM'),
        label: dayjs().format('YYYY年MM月')
      },
      // 宿舍列表
      dormitoryList: [
      ],
      roomItem: {
      },
      dayList: [
      ],
      activeDay: {
        week: '',
        day: dayjs().date()
      },
      list: [
        {
          name: '故障记录'
        },
        {
          name: "维修记录"
        }
      ],
      current: 0,
      recordList: [
      ],
      // 设备列表
      deviceList: [],
      deviceList2: [
        {
          type: '温度',
          name: '温度传感器',
          normalCount: 0,
          errorCount: 0,
          image: '/static/device_temperature.png',
          width: 80,
          height: 80
        },
        {
          type: '湿度',
          name: '湿度传感器',
          normalCount: 0,
          errorCount: 0,
          image: '/static/device_humidity.png',
          width: 80,
          height: 80
        },
        {
          type: 'CO2',
          name: 'CO2传感器',
          normalCount: 0,
          errorCount: 0,
          image: '/static/device_co2.png',
          width: 100,
          height: 56
        },
        {
          type: '风速',
          name: '风速测定仪',
          normalCount: 0,
          errorCount: 0,
          image: '/static/device_wind.png',
          width: 86,
          height: 68
        },
        {
          type: '摄像头',
          name: '摄像头',
          normalCount: 0,
          errorCount: 0,
          image: '/static/device_camera.png',
          width: 80,
          height: 74
        }
      ],
      // 宿舍列表
      showRoom: false,
      roomList: [
      ]
    };
  },
  created() {
    this.getRoomList()
  },
  methods: {
    getRoomList() {
      this.$api.getRoomList().then(res => {
        this.roomList = [
          {
            label: '全部栋舍',
            value: ''
          },
            ...res.map(item => {
              return {
                label: item.buildingno + item.buildingname,
                value: item.id
              }
            })
        ]
        if (res.length) {
          this.roomItem = {
            ...this.roomList[0]
          }
          this.getDeviceByRoom()
        }
      })
    },
    getDeviceByRoom() {
      this.$api.getDeviceByRoom({
        room_id: this.roomItem.value
      }).then(res => {
        this.deviceList = this.deviceList2.map(device => {
          let findList = res.filter(item => item.devtype === device.type)
          let normalCount = findList.filter(item => item.status === 1).length
          let errorCount = findList.filter(item => item.status === 0).length
          if (findList && findList.length) {
            return {
              ...device,
              normalCount,
              errorCount
            }
          }
          return null
        }).filter(item => item)
      })
      this.changeTab(0)
    },
    clickDevice(item) {
      if (item.name === '摄像头') {
        uni.navigateTo({
          url: '/pages/thing/camera?room_id=' + this.roomItem.value
        })
      }
    },
    openCategory(type) {
      if(type === 1) {
        this.showDate = true
      }
      if(type === 2) {
        this.showRoom = true
      }
    },
    confirmDate(value) {
      this.showDate = false
      this.$refs.dayTabRef.setDayList()
      // 如果选择的月份不是当前月,默认重置为1号
      const date = `${value.year}-${value.month}`
      if (date === dayjs().format('YYYY-MM')) {
        this.activeDay = {
          week: '',
          day: dayjs().date()
        }
      } else {
        this.activeDay = {
          week: '',
          day: 1
        }
        this.dateItem = {
          value: date,
          label: dayjs(date).format('YYYY年MM月')
        }
      }
      this.changeTab(this.current)
    },
    confirmRoom(value) {
      this.showRoom = false
      this.roomItem = {
        ...value[0]
      }
      this.getDeviceByRoom()
    },
    changeDay(item) {
      this.activeDay = {
        ...item
      }
      this.changeTab(this.current)
    },
    changeTab(index) {
      this.current = index
      if (index === 0) {
        this.$api.getDeviceFaults({
          room_id: this.roomItem.value,
          status: '',
          date: this.activeDay.day ? `${this.dateItem.value}-${this.activeDay.day > 9 ? this.activeDay.day || '0' + this.activeDay.day : this.activeDay.day}` : this.dateItem.value,
        }).then(res => {
          this.recordList = res.map(item => {
            return {
              name: item.fault_desc,
              date: item.fault_time,
              responser: ''
            }
          })
        })
      } else {
        this.$api.getDeviceFaults({
          room_id: this.roomItem.value,
          status: 2,
          date: this.activeDay.day ? `${this.dateItem.value}-${this.activeDay.day > 9 ? this.activeDay.day || '0' + this.activeDay.day : this.activeDay.day}` : this.dateItem.value,
        }).then(res => {
          this.recordList = res.map(item => {
            return {
              name: item.fault_desc,
              responser:  '维修师傅：' + item.responser,
              date: item.complete_time
            }
          })
        })
      }
    },
  }
}
</script>
<style lang="scss">
.device {
  height: 100%;
  padding: 0 30rpx;
  .device-data {
    display: flex;
    flex-wrap: wrap;
    .device-data-item {
      width: 33%;
      padding: 20rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      .device-data-item-top {
        display: flex;
        image {
          flex-shrink: 0;
        }
        .device-name {
          margin-left: 10rpx;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: 24rpx;
          color: #232A30;
          line-height: 26rpx;
          text-shadow: 0px 3px 6px rgba(36,156,255,0.36);
          text-align: left;
        }
      }
      .device-data-item-bottom {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 25rpx;
        color: #333333;
        line-height: 25rpx;
        margin-top: 20rpx;
      }
    }
  }
  .device-data2 {
    .device-data-item {
      width: 100%;
      padding: 20rpx;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(36,156,255,0.36);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      .device-data-item-top {
        display: flex;
        justify-content: center;
        image {
          flex-shrink: 0;
        }
        .device-name {
          margin-left: 20rpx;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: 28rpx;
          color: #232A30;
          line-height: 30rpx;
          text-shadow: 0px 3px 6px rgba(36,156,255,0.36);
          text-align: left;
        }
      }
      .device-data-item-bottom {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .normal {
          font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: 20rpx;
          color: #01B920;
          line-height: 37rpx;
          text-align: left;
          // 前置圆点
          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            background: #01B920;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
        .error {
          font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: 20rpx;
          color: #FF0000;
          line-height: 37rpx;
          text-align: left;
          // 前置圆点
          &::before {
            content: '';
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            background: #FF0000;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
  .device-box {
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(36,152,246,0.37);
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding: 20rpx;
    margin-top: 30rpx;
    .device-list {
      padding-top: 30rpx;
.device-item:first-child {
  border-top: 1rpx solid #E5E5E5;
}
      .device-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .device-name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 25rpx;
          color: #333333;
          line-height: 34rpx;
          margin-bottom: 16rpx;
        }
        .device-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .device-info-item-label {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 22rpx;
            color: #333333;
            line-height: 25rpx;
            margin-right: 16rpx;
          }
          .device-info-item-value {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 22rpx;
            color: #333333;
            line-height: 25rpx;
          }
        }
      }
    }
  }
  .custom-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: auto;
    padding: 20rpx 0;
    .day-tab {
      cursor: pointer;
      flex-shrink: 0;
      width: 83rpx;
      height: 85rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(10,10,10,0.16);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 17rpx;
      .week {
        width: 25rpx;
        height: 25rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 25rpx;
        color: #B4B4B4;
        text-align: center;
      }
      .day {
        width: 28rpx;
        height: 25rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 25rpx;
        color: #000000;
        text-align: center;
        margin-top: 10rpx;
      }
      &.active {
        background: #249CFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(10,10,10,0.16);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        .week,
        .day {
          color: #ffffff;
        }
      }
    }
  }
  .device-drop-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 0;
  }
}
</style>
